<template>
	<slide-page-right-tab 
		title="测评中"
		class="practise-training">
		<div class="practise-training-content">
			<glass-tag>
				训练词数共计{{ trainWords.length }}个，
				还剩{{ trainWords.length-index-1 }}个
			</glass-tag><br />
			<glass-tag>
				第{{index+1}}个
			</glass-tag>
			<glass-tag>
				当前词: {{ trainWords[index] }}
			</glass-tag>
			
			<div class="practise-training-content-word-wrapper">
				<p 
					class="current-word"
					:class="{
						'move-in': wordAnimate,
					}">
					{{ trainWords[index] }}
				</p>
				<image 
					class="record-btn"
					:src="getImgByRecordStatus"
					@click="record">
				</image>
			</div>
			
			<div class="practise-training-content-control">
				<glass-button 
					v-if="index === 0"
					@click="cancelTest">
					取消测评
				</glass-button>
				<glass-button 
					v-else
					:style="{
						opacity: trainWords[index-1] ? 1 : 0
					}"
					@click="lastWord">
					上一个: {{ trainWords[index-1] }}
				</glass-button>
				<glass-button 
					v-if="index === trainWords.length-1"
					@click="finishTest">
					完成测评
				</glass-button>
				<glass-button 
					v-else
					:style="{
						opacity: trainWords[index+1] ? 1 : 0
					}"
					@click="nextWord">
					下一个: {{ trainWords[index+1] }}
				</glass-button>
			</div>
			
		</div>
		<ncu-message 
			:open="msgConfig.open"
			:type="msgConfig.type"
			:message="msgConfig.message">
		</ncu-message>
	</slide-page-right-tab>
</template>

<script>
	import slidePageRightTab from '../../components/slide-page-right/slide-page-right-tab.vue'
	import GlobalData from '../../common/global.js'
	import XunFeiSpeechAPI from '../../common/api.js'
	import { api_config } from '../../common/config.js'
    export default {
		components: {
			slidePageRightTab,
		},
        data() {
            return {
				index: 0,
				trainWords: GlobalData.trainWords,
				wordAnimate: false,
				isRecording: false,
				recorderManager: null,
				recordFile: null,
				icon: '',
				msgConfig: {
					open: false,
					type: 'danger',
					message: '识别失败',
				},
            }
        },
		methods: {
			lastWord() {
				this.index = Math.max(0, this.index-1)
			},
			nextWord() {
				this.index = Math.min(this.index+1, this.trainWords.length-1)
			},
			cancelTest() {
				this.$emit('cancelTest')
			},
			finishTest() {
				this.$emit('finishTest')
			},
			handleWordAnimate() {
				this.wordAnimate = false
				setTimeout(() => {
					this.wordAnimate = true
				}, 50)
			},			
			record() {
				const isRecoring = this.isRecording
				if(isRecoring) {
					this.stopRecord()
				} else {
					this.startRecord()
				}
				this.isRecording = !this.isRecording
				
			},
			startRecord() {
				let _this = this
				// 录音
				this.recorderManager = uni.getRecorderManager()
				this.recorderManager.onStop(function (res) {
					_this.recordFile = res.tempFilePath
				})
				this.recorderManager.start()
			},
			stopRecord() {
				if(this.recorderManager)
					this.recorderManager.stop()
				this.icon = 'waiting'
				setTimeout(async () => {
					const req = new XunFeiSpeechAPI(
						api_config.appid, 
						api_config.secret_key,
						this.recordFile)
					const res = await req.requests()
					if(res.status !== -1) {
						const data = JSON.parse(res.data.data)
						global.reqResults[this.index] = data.length ? data[0].onebest : ''
						this.msgPopupOpen('识别成功', 'success')
					} else {
						this.msgPopupOpen(`识别失败${res.error.message}`, 'error')
					}
					this.icon = ''
				}, 200)
			},
			msgPopupOpen(message, type) {
				this.msgConfig.type = type
				this.msgConfig.message = message
				this.msgConfig.open = true
			},
		},
		computed: {
			getImgByRecordStatus() {
				const voicePrepareImg = '/static/voice.png'
				const voiceRecordImg = '/static/voice2.png'
				return this.isRecording ? voiceRecordImg : voicePrepareImg
			}
		},
		watch: {
			index() {
				this.handleWordAnimate()
			}
		},
		mounted() {
			this.handleWordAnimate()
		}
    }
</script>

<style lang="scss" scoped>
	.practise-training {
		width: 65%;
		
		
		&-content {
			
			position: relative;
			height: 100%;
			
			&-word-wrapper {
				width: 80%;
				min-height: 60%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				
				.current-word {
					font-size: 3rem;
					font-weight: bold;
					
				}
				.record-btn {
					width: 143px;
					height: 100px;
				}
			}
			
			&-control {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: space-between;
			}
		}
	}
		
</style>


